<template>
  <div class='pr' style="width:100%;height:100%;">
    <div class="list fsec">
      <div class="item" v-for="(item,index) in list" :key="index">
        <div class="name">{{item.name}}</div>
        <div class="val" :class="item.class">{{moneyFormat(item.val)}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import RepairViewList from "./RepairViewList.vue"; 
export default {
  name: "box3",
  props:{
    datas:Array,
    moneyFormat:Function
  },
  components: {
    RepairViewList,
  },
  data() {
    return {
      flag: 2,
      kvs: [
        {
          flag: 0,
          text: "当日量",
        },
        {
          flag: 1,
          text: "7日量",
        },
        {
          flag: 2,
          text: "30日量",
        },
      ],
      dialog_visible: false,
      sub_title: null,
      filters: [],
      list:[
        {name:'RFID静态盘点',val:'45'},
        {name:'RFID动态盘点',val:'6'},
      ]
    };
  },
  watch: {
    flag: {
      handler: "initCharts",
      immediate: true,
    },
    datas(){
      this.datas.forEach((i,index)=>this.list[index].val=i)
    }
  },
  myChart: null,
  mounted() {
  },
  methods: {
    // async initCharts() {
    //   const data = await this.$http.get(
    //     `/api/RepairReport/RepairLargeScreenModelGList?flag=${this.flag}`
    //   );

    //   if (!this.myChart) {
    //     this.myChart = init(document.getElementById("echart3"));
    //     this.myChart.on("click", (ev) => {
    //       this.filters = [
    //         {
    //           Name: "ApplyTime",
    //           compare: ">=",
    //           value: ev.data.Ds,
    //         },
    //         {
    //           Name: "ApplyTime",
    //           compare: "<",
    //           value: ev.data.De,
    //         },
    //         {
    //           Name: "Type",
    //           compare: "==",
    //           value: ev.data.TypeEnum,
    //         },
    //       ];
    //          this.sub_title=`日期起:${ev.data.Ds.substring(0,10)} 日期止:${ev.data.De.substring(0,10)} 报修类型:${ev.data.TypeEnumText}`
    //       this.dialog_visible = true;
    //     });
    //   }

    //   const option = {
    //     yAxis: {
    //       show: false,
    //     },
    //     grid: {
    //       bottom: 75,
    //     },
    //     xAxis: {
    //       type: "category",
    //       axisTick: {
    //         show: false,
    //       },
    //       axisLine: {
    //         show: false,
    //       },
    //       axisLabel: {
    //         show: true,
    //         rotate: 45,
    //         hideOverlap: true,
    //         color: "#fff",
    //       },
    //       data: data.map((i) => i.TypeEnumText.length<=7?i.TypeEnumText:(i.TypeEnumText.slice(0,7)+'...')),
    //     },
    //     series: [
    //       {
    //         type: "bar",
    //         barWidth: 20,
    //         label: {
    //           show: true,
    //           position: "top",
    //           textStyle: {
    //             color: "#fff",
    //           },
    //         },
    //         itemStyle: {
    //           normal: {
    //             color: new graphic.LinearGradient(
    //               0,
    //               0,
    //               0,
    //               1, // 从上到下变浅
    //               [
    //                 {
    //                   offset: 0,
    //                   color: "#03a98a",
    //                 },
    //                 {
    //                   offset: 1,
    //                   color: "#25527d",
    //                 },
    //               ],
    //               false
    //             ),
    //             opacity: 1,
    //           },
    //         },
    //         data: data.map((v) => ({
    //           ...v,
    //           value: v.Count,
    //         })),
    //       },
    //     ],
    //     color: this.colors,
    //   };
    //   // 使用刚指定的配置项和数据显示图表。
    //   this.myChart.setOption(option);
    // },
  },
};
</script>

<style>
</style>